<template>
	<view id="customsBox" class="customs-box" :style="'height: calc(100vh - '+ topValue +'px);margin-top: '+ topValue +'px;'"> 
		<!-- 单条单据 -->
		<empty v-if="!list || list.length == 0"></empty>
		<view  class="item" v-for="(item, index) in list" :key="index" @click="clickItem(item,index)" :class="item.id == customId ? 'active' : ''">
			<view class="item-img">
				<image :src="item.avatar"  v-if="item.avatar"></image>
				<view  class="imge-default-box">
					<text class="imge-default">{{item.name ? String(item.name).substr(0,1) : "散" }}</text>
				</view>
			</view>
			<view class="cust-info">
				<view class="c-tit" >
					<text v-if="isShowName">{{item.name ? item.name : "散客"}}</text>
					<text class="cp-txt" v-if="isShowCp">{{item.company ? "  " + item.company : ""}}</text>
				</view>
				<view class="c-phone">{{item.cellphone ? item.cellphone:""}}</view>
				<view class="c-tag" >
					<text class="c-t-new-c c-t-new-c-b" v-if="item.isold_name && item.isold != 1">{{item.isold_name}}</text>
					<text class="c-t-t"  v-for="(tItem,index1) in item.tag" :key="index1" :class="'c-t-c-' + index1 % 6"  v-show="tItem">{{tItem}}</text>
				</view>
				<view class="c-time">{{item.title}}<text class="c-t-txt">{{item.value}}</text></view>
			</view>
			<image class="select-img" src="/static/icon/select.svg" v-if="item.id == customId"></image>
		</view>
	</view>
</template>

<script>
	import empty from '../comm/empty.vue';
	import staticConst from "../../js/const/StaticConst.js";
	import util from '../../js/util/Util.js';
	export default
	{
		components:{ empty },
		props:['list',"isSearching","topValue","md","isShowName","isShowCp"],
		data(){
			return{
				customId:null,
				customImg : staticConst.DEFAULT_IMG,
			}
		},
		methods:{
			clickItem(item)
			{
				if(this.customId == item.id) return;
				this.customId = item.id;
				this.$emit("setCustomInfo",item);
			},
			
			setCustomId(id)
			{
				this.customId = id;
			},
			
			setCustomIdNull()
			{
				this.customId = null;
			},
			
			handlerScroll()
			{
				this.$nextTick(()=>
				{
					var flag = util.scrollData("#customsBox");
					if(flag)
					{
						// 加载数据
						if(!this.isSearching)
						{
							this.$emit("getCustomList");
						}
						else
						{
							this.$emit("searchCustomCatAndKwList");
						}
					}
				});
			},
		},
		
		mounted()
		{
			if(document.querySelector("#customsBox"))
				document.querySelector("#customsBox").addEventListener("scroll",this.handlerScroll,true);
		},
		
		destroyed()
		{
			if(document.querySelector("#customsBox"))
				document.querySelector("#customsBox").removeEventListener("scroll",this.handlerScroll);
		},
	}
</script>

<style lang="scss">
	.customs-box {
		width: 343px;
		overflow-y: auto;
		height: calc(100vh - 110px);
		margin-top: 110px;
		.item {
			padding-top: 5px;
			background: #fff;
			cursor: pointer;
			border-bottom: 1px #EFEFEF solid;
			padding: 10px;
			background: #FFF;
			display: flex;
			align-items: center;
			position: relative;
			.select-img
			{
				position: absolute;
				right: 0;
				top: 0;
				width: 20px;
				height: 20px;
			}
			.item-img
			{
				width: 80px;
				height: 80px;
				border-radius: 4px;
				overflow: hidden;
				image
				{
					width: 80px;
					height: 80px;
				}
				.imge-default-box
				{
					height: 80px;
					width: 80px;
					background-color: #EEE;
					display: flex;
					align-items: center;
					.imge-default
					{
						
						text-align: center;
						line-height: 80px;
						font-size: 30px;
						font-weight: bold;
						width: 100%;
						color: #333;
					}
				}
			}
			
			.cust-info
			{
				padding-left : 10px;
				width : calc(100% - 100px);
				.c-tit
				{
					font-size: 18px;
					color: #333;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
					.cp-txt
					{
						color: #999;
					}
				}
				.c-phone
				{
					color: #333;
					// font-size: 12px;
				}
				
				.c-tag
				{
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
					// line-clamp: 2;
					.c-t-new-c, .c-t-t
					{
						padding : 0 3px;
						border-radius: 3px;
						margin-right: 4px;
					}
					.c-t-t
					{
						color: #fff;
					}
					.c-t-new-c-b
					{
						color: red;
						background-color: #ddd;
					}
					.c-t-c-0
					{
						background-color: #F04848;
					}
					.c-t-c-1
					{
						background-color: #00C569;
					}
					.c-t-c-2
					{
						background-color: #3388FF;
					}
					.c-t-c-3
					{
						background-color: #FF6600;
					}
					.c-t-c-4
					{
						background-color: #5500ff;
					}
					.c-t-c-5
					{
						background-color: #00aa00;
					}
				}
				.c-time
				{
					color: #333;
					.c-t-txt
					{
						color: red;
						padding-left: 5px;
					}
				}
				
			}
			
		}
		
		.item:hover {
			&.active {
				background: #F5F5F5;
			}
			background:#F5F5F5;
		}
		.active {
			background: #F5F5F5;
		}
	}
	
	.customs-box::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
		height: 1px;
	}
	
	.customs-box::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
		background: #ccc;//rgba(0, 0, 0, 0.0);
		scrollbar-arrow-color: red;
	}
	.customs-box::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.0);
		border-radius: 0;
		background: rgba(0, 0, 0, 0);
	}
</style>
